<template>
    <div>
        <div class="tableBox">
            <el-table :data="tableDatas" border style="width: 100%" size="mini">
                <el-table-column prop="qymc" align="center" label="供应商名称" min-width="250" show-overflow-tooltip />
                <el-table-column prop="a" align="center" :label="currentYear+''">
                    <el-table-column prop="01" align="center" label="01" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['01']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="02" align="center" label="02" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['02']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="03" align="center" label="03" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['03']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="04" align="center" label="04" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['04']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="05" align="center" label="05" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['05']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="06" align="center" label="06" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['06']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="07" align="center" label="07" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['07']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="08" align="center" label="08" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['08']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="09" align="center" label="09" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['09']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="10" align="center" label="10" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['10']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="11" align="center" label="11" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['11']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="12" align="center" label="12" width="60">
                        <template slot-scope="scope">
                            <div class="redRect" v-if="scope.row['12']!=null"></div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <div class="echartBox">
            <div id="radar" style="height:350px;width:100%;"></div>
        </div>
        <div class="tableBox">
            <el-table :data="jyTabledata" border style="width: 100%" size="mini">
                <el-table-column prop="qymc" align="left" label="供应商名称" min-width="250" show-overflow-tooltip />
                <el-table-column prop="cs" align="center" label="交易次数" min-width="250" show-overflow-tooltip />
            </el-table>
        </div>
    </div>
</template>


<script>
import * as echarts from "echarts";
export default {
    name: 'khjmd',
    props: {
        rowData: {
            type: Object, default: function () {
                return {}
            }
        },


    },
    data() {
        return {
            loading: false,

            currentYear: '',
            option: {},

            tableDatas: [

            ],
            jyTabledata: [

            ]
        }
    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                this.tableDatas = newVal.yfList
                this.jyTabledata = newVal.csList


                this.init()
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {

        this.currentYear = new Date().getFullYear();

        
    },
    methods: {
        init() {
            this.radarChart()
        },
        radarChart() {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                let self = this

                let indicator = []
                 let seriesData = []
                if (this.jyTabledata.length > 0) {
                    const max = Math.max(...this.jyTabledata.map(item => item.cs))+5;
                    for(let i=0;i<this.jyTabledata.length;i++){
                         indicator.push({
                            max:max,text:this.jyTabledata[i].qymc
                         })
                         seriesData.push(this.jyTabledata[i].cs)
                    }
                    
                }
                let chart = echarts.init(document.getElementById('radar'));
                let option = {

                    tooltip: {
                        trigger: 'axis'
                    },
                    radar: [ // 设置分割线的样式
                        {
                            axisLine: {
                                lineStyle: {
                                    color: '#E3E3E3'
                                }
                            },

                            indicator: indicator,
                            name: {
                                textStyle: {
                                    fontSize: 14,
                                    backgroundColor: '#747474',
                                    color: '#fff',
                                    fontWeight: 'bold',
                                    padding: 4
                                }
                            },
                            center: ['50%', '55%'],
                            radius: 140,
                            startAngle: 90,
                            splitNumber: 4,
                            axisName: {
                                color: '#fff',
                                backgroundColor: '#666',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        }],
                    series: [{
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        emphasis: {
                            lineStyle: {
                                width: 4,

                            }
                        },
                        data: [{
                            value: seriesData,
                            name: self.currentYear
                        },]
                    },

                    ]
                };
                chart.setOption(option)
            })

        },



    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-top: 15px;
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
}
.redRect {
    width: 16px;
    height: 16px;
    background: red;
    margin-top: 6px;
    margin: 0 auto;
}
</style>